<template>
    <div class="upToDateContainer">

        <div class="textDescription">
            <h1>STAY UP-TO-DATE</h1>
            <p class="topP">To stay on top of your game, keep an eye on the in-game News section. Follow us on social
                media for the
                latest chatter and sneak peeks on what the team is working on. Don't be a stranger and join the
                conversation.</p>
            <p>FOLLOW BRAWL STARS ON</p>
            <div class="follows">
                <a href="https://www.reddit.com/r/BoomBeach/" target="_blank"><img
                    src="/src/assets/img/games/brawl/apps/reddit.webp" alt=""></a>
                <a href="https://www.youtube.com/user/OfficialBoomBeach" target="_blank"><img
                    src="/src/assets/img/games/brawl/apps/youtube.webp" alt=""></a>
                <a href="https://www.facebook.com/BoomBeach" target="_blank"><img
                    src="/src/assets/img/games/brawl/apps/facebook.webp" alt=""></a>
                <a href="https://www.instagram.com/BoomBeach/" target="_blank"><img
                    src="/src/assets/img/games/brawl/apps/instagram.webp" alt=""></a>
                <a href="https://www.twitter.com/BoomBeach" target="_blank"><img
                    src="/src/assets/img/games/brawl/apps/twitter.webp" alt=""></a>
            </div>
        </div>
        <img class="gameImg" src="/src/assets/img/games/beach/leftBack03.webp" alt="">
        <img class="background" src="/src/assets/img/games/beach/stayUpToDateBackground.webp" alt="">
    </div>
</template>

<script setup>

</script>

<style scoped>
.upToDateContainer {
    position: relative;
    margin-top: 30px;
    display: flex;
    padding: 50px 0;
    overflow: hidden;
}

.upToDateContainer .gameImg {
    width: 58%;
    margin-right: -16%;
}

.upToDateContainer .textDescription {
    width: 40%;
    margin: auto;
}

.textDescription h1 {
    font-size: 34px;
    font-weight: bold;
    margin: 23px 0;
    color: #fff;
}

.textDescription p {
    font-size: 18px;
    line-height: 1.5;
    color: #fff;
}

.textDescription .topP {
    margin-bottom: 30px;
}

.follows {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 23px;
}

.follows a {
    margin-right: 20px;
}

.follows img {
    height: 23px;
    width: auto;
    margin: 0;
    padding: 0;
}

.upToDateContainer .background {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>